<template>
  <div>
    <div>左：方式
      <el-select v-model="animation.animationL" size="small">
        <el-option
          v-for="item in effect"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      执行时间：
      <el-input style="width: 50px" size="small" v-model="animation.durationL"></el-input>
      延迟时间：
      <el-input style="width: 50px" size="small" v-model="animation.delayL"></el-input>
    </div>
    <div>中：方式
      <el-select v-model="animation.animationM" size="small">
        <el-option
          v-for="item in effect"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      执行时间：
      <el-input style="width: 50px" size="small" v-model="animation.durationM"></el-input>
      延迟时间：
      <el-input style="width: 50px" size="small" v-model="animation.delayM"></el-input>
    </div>
    <div>右：方式
      <el-select v-model="animation.animationR" size="small">
        <el-option
          v-for="item in effect"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      执行时间：
      <el-input style="width: 50px" size="small" v-model="animation.durationR"></el-input>
      延迟时间：
      <el-input style="width: 50px" size="small" v-model="animation.delayR"></el-input>
    </div>
    <el-button @click="start">开始</el-button>
  </div>
</template>

<script>
let arr = ['bounce', 'flash', 'pulse', 'rubberBand',
  'shake', 'headShake', 'swing', 'tada',
  'wobble', 'jello', 'bounceIn', 'bounceInDown',
  'bounceInLeft', 'bounceInRight', 'bounceInUp', 'bounceOut',
  'bounceOutDown', 'bounceOutLeft', 'bounceOutRight', 'bounceOutUp',
  'fadeIn', 'fadeInDown', 'fadeInDownBig', 'fadeInLeft',
  'fadeInLeftBig', 'fadeInRight', 'fadeInRightBig', 'fadeInUp',
  'fadeInUpBig', 'fadeOut', 'fadeOutDown', 'fadeOutDownBig',
  'fadeOutLeft', 'fadeOutLeftBig', 'fadeOutRight', 'fadeOutRightBig',
  'fadeOutUp', 'fadeOutUpBig', 'flipInX', 'flipInY',
  'flipOutX', 'flipOutY', 'lightSpeedIn', 'lightSpeedOut',
  'rotateIn', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft',
  'rotateInUpRight', 'rotateOut', 'rotateOutDownLeft', 'rotateOutDownRight',
  'rotateOutUpLeft', 'rotateOutUpRight', 'hinge', 'jackInTheBox',
  'rollIn', 'rollOut', 'zoomIn', 'zoomInDown',
  'zoomInLeft', 'zoomInRight', 'zoomInUp', 'zoomOut',
  'zoomOutDown', 'zoomOutLeft', 'zoomOutRight', 'zoomOutUp',
  'slideInDown', 'slideInLeft', 'slideInRight', 'slideInUp',
  'slideOutDown', 'slideOutLeft', 'slideOutRight', 'slideOutUp',
  'heartBeat']

export default {
  name: 'AnimationEdit',
  data() {
    return {
      effect: arr,
      animation: {
        durationL: '0',
        durationM: '0.5',
        durationR: '1',
        delayL: '0',
        delayM: '0',
        delayR: '0',
        animationL: 'fadeInLeft',
        animationM: 'fadeInUp',
        animationR: 'fadeInUp',
      }
    }
  },
  methods: {
    start() {
      this.$emit('start')
    }
  },
  watch: {
    animation: {
      deep: true,
      immediate: true,
      handler(value) {
        this.$emit('animationChange', value)
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
